<template>
  <div>
    <ul v-if="todoLen.value > 0">
      <todo-item v-for="item of data" :key="item.id" :item='item'
      @toggle-completed='toggleCompleted'
      @remove-todo='removeTodo'></todo-item>
    </ul>
    <p v-else>- 当前没有数据 -</p>
  </div>
</template>

<script>
import TodoItem from './TodoItem'
  export default {
    name: 'Todos',
    props: ['data'],
    // 使用 TodoList 组件 provide 出的数据
    inject: ['todoLen'],
    components: {
      TodoItem
    },
    methods: {
      /**
       * 处理代办完成状态
       */
      toggleCompleted(id){
        this.$emit('toggleCompleted', id)
      },
      /**
       * 移除代办
       */
      removeTodo(id){
        this.$emit('removeTodo', id)
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>